<template>
  <div style="background-color: white">
    <div class="probox">
      <router-link to="/index/product"
        ><el-page-header content="修改商品"> </el-page-header
      ></router-link>
    </div>
    <el-divider></el-divider>
    <div>
      <el-form
        status-icon
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="desc">
          <el-input v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="ruleForm.categoryId" placeholder="请选择">
            <el-option
              v-for="it in options"
              :key="it._id"
              :label="it.name"
              :value="it._id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片" prop="imgs">
          <el-input v-model="ruleForm.imgs"></el-input>
        </el-form-item>
        <el-form-item label="商品详情" prop="detail">
          <el-input v-model="ruleForm.detail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateProduct(ruleForm)"
            >提交</el-button
          >
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import {getProductInfos} from '../api/product'
export default {
  data() {
    return {
      ruleForm: {
        _id: "",
        categoryId: "", //分类id
        pCategoryId: 0, //父分类id
        name: "",
        desc: "",
        price: "",
        detail: "",
        imgs: []
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        desc: [{ required: true, message: "请输入商品描述", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        inventory: [
          { required: true, message: "请输入商品库存", trigger: "blur" },
        ],
        naspecAttrme: [
          { required: true, message: "请输入商品规格", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapActions(["updateProducts"]),
    updateProduct(ruleForm) {
      console.log(ruleForm);
      this.updateProducts(ruleForm);
    },
  },
  computed: {
    options() {
      return this.$store.state.products.categorys.list;
    },
  },
  async mounted() {
    var productId=localStorage.productId
    var {data} =await getProductInfos(productId)
    console.log(data,123456)
    localStorage.setItem("productId","")
    this.ruleForm =data.data
  },
};
</script>
<style >
.tag-group {
  margin: 8px 0 8px 20px;
}
.tag-group .el-tag {
  height: 20px;
  line-height: 20px;
  margin-right: 15px;
}
</style>